<!DOCTYPE html>
<html>
	<head>
		<title>jQuery UI goodness</title>
		<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" type="text/css">
		<link rel="stylesheet" href="styles.css" type="text/css">
	</head>
	
	<body>
	
		
			
			<div id="kyle" class="ui-widget-content">
				<h1 class="ui-widget-header">Test UI themes page</h1>
				<h4 class="ui-widget-header">Test Button</h4><div id="button" class="ui-icon ui-icon-closethick"></div> <br/>
				<h4 class="ui-widget-header">Test Autocomplete</h4> 
				<div class="ui-widget">
					<label for="tags">Tags: </label>
					<input id="tags" class="ui-autocomplete-input">
				</div>
			
			</div>
			
		
		
	
	<body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script>
		$(function(){
			var availableTags = [
				"James",
				"Matt",
				"Kameron",
				"Adam",
				"Caleb",
				"Sandra",
				"Derreck",
				"Blake",
				"Jon",
				"John"
			];
			
			//get the json
			$.ajax({
				url: "names.json",
				dataType: "jsonp",
				success: function(json){
					console.log(json);
					
				
				}
				
			});
			
			$('#tags').autocomplete({
						source: availableTags,				
						autoFocus: true,
						minLength: 1
					});
		});
	
	</script>
</html>